<template>
	<footer class="footer">
		<span class="todo-count">剩余<strong> {{ num }} </strong></span>
		<ul class="filters">
			<li>
				<a  href="javascript:;"
				:class="{selected: selected === 'all'}"
				@click="change('all')"
				>全部</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: selected === 'active'}"
				@click="change('active')"
				>未完成</a>
			</li>
			<li>
				<a href="javascript:;"
				:class="{selected: selected === 'complete'}"
				@click="change('complete')"
				>已完成</a>
			</li>
		</ul>
		<button class="clear-completed" v-show="state" @click="fn" >清除已完成</button>
	</footer>
</template>

<script>
	export default {
			props: ["arr"],

			data () {
				return {
					selected: "all"
				}
			},
			methods: {
				fn(){
					this.$emit("on")
				},
				change(selected){
					this.selected = selected
					this.$emit("change", selected)
				}
			},
			computed: {
				num(){
					return this.arr.filter(item => item.isDone !== true).length
				},
				state(){
					return this.arr.some(item => item.isDone)
				}
			}
	}
</script>
